import React from 'react';

const DataSource = {
  addChangeListener(event: any) {},
  removeChangeListener(event: any) {},
};

// https://zh-hans.reactjs.org/docs/higher-order-components.html
// HOC是不会修改组件的 纯函数 是没有副作用的
// !!!!!!! 不要改变原始组件，而应该使用组合
function withSubscription(WrappedComponent: any, selectData: any) {
  // 函数接受一个组件 返回一个组件
  return class Index extends React.Component<any, any> {
    constructor(props: any) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props),
      };
    }

    // useEffect(() => {
    //   return () => {}
    // }, [])

    componentDidMount() {
      // ...负责订阅相关的操作...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }
    // change的函数
    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props),
      });
    }

    render() {
      // 使用新的数据渲染被包裹的组件 还可以传递其他的属性
      // HOC 应该透传与自身无关的 props
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
